// 柱状图
export function bar(myChart, barData) {
    // 实例化对象
    // var myChart = this.$echarts.init(this.$refs.bar);
    // 指定配置和数据
    var option = {
        color: ["#3398DB"],
        tooltip: {
            trigger: "axis",
            axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
            backgroundColor: "rgba(255,255,255,0.3)",
            textStyle: {
                color: "white", //设置文字颜色
                fontSize: fontSize(0.12)
            },
            borderColor: "rgba(255,255,255,0.3)", //设置边框颜色
        },
        //修改图表大小
        grid: {
            left: "0%",
            right: "0%",
            bottom: "4%",
            top: "10%",
            containLabel: true,
        },
        xAxis: [{
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            axisTick: {
                alignWithLabel: true,
            },
            //修改x轴刻度标签样式
            axisLabel: {
                color: "rgba(255,255,255,.6)",
                fontSize: fontSize(0.12),
            },
            //x轴的样式
            axisLine: {
                show: false,
            },
        }, ],
        yAxis: [{
            type: "value",
            //修改y轴刻度标签样式
            axisLabel: {
                color: "rgba(255,255,255,.6)",
                fontSize: fontSize(0.12),
            },
            //y轴的样式
            axisLine: {
                show: true,
                lineStyle: {
                    color: "rgba(255,255,255,.1)",
                    width: fontSize(0.02),
                },
            },
            //y轴分割线的颜色
            splitLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.1)",
                },
            },
        }, ],
        series: [{
            name: "直接访问",
            type: "bar",
            //修改柱子的宽度
            barWidth: "35%",
            data: barData,
            itemStyle: {
                // 修改柱子圆角
                barBorderRadius: fontSize(0.03),
            },
        }, ],
    };
    // 把配置给实例对象
    myChart.setOption(option);
    //让图表跟随屏幕自适应
    window.addEventListener("resize", function() {
        myChart.resize();
    });
}
//折线图
export function line(myChart, lineData) {
    // 1. 实例化对象
    // var myChart = this.$echarts.init(this.$refs.line);
    // 2.指定配置
    var option = {
        // 通过这个color修改两条线的颜色
        color: ["#00f2f1", "#ed3f35", "#4c9bfd"],
        tooltip: {
            trigger: "axis",
            backgroundColor: "rgba(255,255,255,0.3)",
            textStyle: {
                color: "white", //设置文字颜色
                fontSize: fontSize(0.12),
            },
            borderColor: "rgba(255,255,255,0.3)", //设置边框颜色
        },
        //保存图片
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        legend: {
            // 如果series 对象有name 值，则 legend可以不用写data
            // 修改图例组件 文字颜色
            textStyle: {
                color: "#4c9bfd",
                fontSize: fontSize(0.12),
            },
            // 这个10% 必须加引号
            right: "2%",
        },
        grid: {
            top: "20%",
            left: "3%",
            right: "4%",
            bottom: "3%",
            show: true, // 显示边框
            borderColor: "#012f4a", // 边框颜色
            containLabel: true, // 包含刻度文字在内
        },

        xAxis: {
            type: "category",
            boundaryGap: false,
            data: [
                "1月",
                "2月",
                "3月",
                "4月",
                "5月",
                "6月",
                "7月",
                "8月",
                "9月",
                "10月",
                "11月",
                "12月",
            ],
            axisTick: {
                show: false, // 去除刻度线
            },
            axisLabel: {
                color: "rgba(255,255,255,0.6)", // 文本颜色
                fontSize: fontSize(0.12),
            },
            axisLine: {
                show: false, // 去除轴线
            },
        },
        yAxis: {
            type: "value",
            axisTick: {
                show: false, // 去除刻度线
            },
            axisLabel: {
                color: "rgba(255,255,255,0.6)", // 文本颜色
                fontSize: fontSize(0.12)
            },
            axisLine: {
                show: false, // 去除轴线
            },
            splitLine: {
                lineStyle: {
                    color: "rgba(255,255,255,0.1)", // 分割线颜色
                    // width: fontSize(0.02),
                },
            },
        },
        series: [{
                name: "新增粉丝",
                type: "line",
                // 单独修改线的样式
                lineStyle: {
                    width: fontSize(0.02),
                },
                // true 可以让我们的折线显示带有弧度
                smooth: true,
                data: lineData[0].data[0],
            },
            {
                name: "新增游客",
                type: "line",
                // 单独修改线的样式
                lineStyle: {
                    width: fontSize(0.02),
                },
                smooth: true,
                data: lineData[1].data[0],
            },
            {
                name: "新增播放量",
                type: "line",
                // 单独修改线的样式
                lineStyle: {
                    width: fontSize(0.02),
                },
                smooth: true,
                data: lineData[0].data[1],
            },
        ],
    };

    // 3. 把配置给实例对象
    myChart.setOption(option);
    // 4. 让图表跟随屏幕自动的去适应
    window.addEventListener("resize", function() {
        myChart.resize();
    });

    // 5.点击切换效果
    $(".line h2").on("click", "a", function() {
        // alert(1);
        // console.log($(this).index());
        // 点击 a 之后 根据当前a的索引号 找到对应的 yearData的相关对象
        // console.log(yearData[$(this).index()]);
        var obj = yearData[$(this).index()];
        option.series[0].data = obj.data[0];
        option.series[1].data = obj.data[1];
        // 需要重新渲染
        myChart.setOption(option);
    });
}
//饼状图
export function pie(myChart) {
    // 1. 实例化对象
    // var myChart = this.$echarts.init(this.$refs.pie);
    // 指定配置和数据
    var option = {
        color: ["#065aab", "#066eab", "#0682ab", "#0696ab", "#06a0ab"],
        tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)",
            backgroundColor: "rgba(255,255,255,0.3)",
            textStyle: {
                color: "white", //设置文字颜色
                fontSize: fontSize(0.12)
            },
            borderColor: "rgba(255,255,255,0.3)", //设置边框颜色
        },
        legend: {
            // 距离底部为0%
            bottom: "0%",
            // 小图标的宽度和高度
            itemWidth: fontSize(0.1),
            itemHeight: fontSize(0.1),
            data: ["0岁以下", "20-29岁", "30-39岁", "40-49岁", "50岁以上"],
            // 修改图例组件的文字为 12px
            textStyle: {
                color: "rgba(255,255,255,.5)",
                fontSize: fontSize(0.12),
            },
        },
        //修改图表大小
        grid: {
            left: "0%",
            right: "0%",
            bottom: "4%",
            top: "10%",
            containLabel: true,
        },
        series: [{
            name: "年龄分布",
            type: "pie",
            // 设置饼形图在容器中的位置
            center: ["50%", "50%"],
            //  修改内圆半径和外圆半径为  百分比是相对于容器宽度来说的
            radius: ["40%", "60%"],
            // 不显示标签文字
            label: { show: false },
            // 不显示连接线
            labelLine: { show: false },
            data: [
                { value: 1, name: "0岁以下" },
                { value: 4, name: "20-29岁" },
                { value: 2, name: "30-39岁" },
                { value: 2, name: "40-49岁" },
                { value: 1, name: "50岁以上" },
            ],
        }, ],
    };
    // 把配置给实例对象
    myChart.setOption(option);
    //让图表跟随屏幕自适应
    window.addEventListener("resize", function() {
        myChart.resize();
    });
}

//柱状图2
export function bar2(myChart) {
    // 实例化对象
    // var myChart = this.$echarts.init(this.$refs.bar2);
    var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
    // 2. 指定配置和数据
    var option = {
        grid: {
            top: "10%",
            left: "22%",
            bottom: "10%",
            // containLabel: true
        },
        // 不显示x轴的相关信息
        xAxis: {
            show: false,
        },
        yAxis: [{
                type: "category",
                inverse: true,
                data: ["抖音APP", "淘宝APP", "京东APP", "快手APP", "天猫"],
                // 不显示y轴的线
                axisLine: {
                    show: false,
                },
                // 不显示刻度
                axisTick: {
                    show: false,
                },
                // 把刻度标签里面的文字颜色设置为白色
                axisLabel: {
                    color: "#fff",
                    fontSize: fontSize(0.12)
                },
            },
            {
                data: [702, 350, 610, 793, 664],
                inverse: true,
                // 不显示y轴的线
                axisLine: {
                    show: false,
                },
                // 不显示刻度
                axisTick: {
                    show: false,
                },
                // 把刻度标签里面的文字颜色设置为白色
                axisLabel: {
                    color: "#fff",
                    fontSize: fontSize(0.12)
                },
            },
        ],
        series: [{
                name: "条",
                type: "bar",
                data: [70, 34, 60, 78, 69],
                yAxisIndex: 0,
                // 修改第一组柱子的圆角
                itemStyle: {
                    barBorderRadius: fontSize(0.2),
                    // 此时的color 可以修改柱子的颜色
                    color: function(params) {
                        // params 传进来的是柱子对象
                        // console.log(params);
                        // dataIndex 是当前柱子的索引号
                        return myColor[params.dataIndex];
                    },
                },
                // 柱子之间的距离
                barCategoryGap: fontSize(0.5),
                //柱子的宽度
                barWidth: fontSize(0.1),
                // 显示柱子内的文字
                label: {
                    show: true,
                    position: "inside",
                    // {c} 会自动的解析为 数据  data里面的数据
                    formatter: "{c}%",
                    fontSize: fontSize(0.12)
                },
            },
            {
                name: "框",
                type: "bar",
                barCategoryGap: fontSize(0.5),
                barWidth: fontSize(0.15),
                yAxisIndex: 1,
                data: [100, 100, 100, 100, 100],
                itemStyle: {
                    color: "none",
                    borderColor: "rgb(0,193,222,0.8)",
                    borderWidth: fontSize(0.03),
                    barBorderRadius: fontSize(0.15),
                },
            },
        ],
    };

    // 3. 把配置给实例对象
    myChart.setOption(option);
    //让图表跟随屏幕自适应
    window.addEventListener("resize", function() {
        myChart.resize();
    });
}
//折线图2
export function line2(myChart, echarts) {
    // 1. 实例化对象
    // var myChart = this.$echarts.init(this.$refs.line2);
    // 2.指定配置
    var option = {
        tooltip: {
            trigger: "axis",
            backgroundColor: "rgba(255,255,255,0.3)",
            textStyle: {
                color: "white", //设置文字颜色
                fontSize: fontSize(0.12)
            },
            borderColor: "rgba(255,255,255,0.3)", //设置边框颜色
        },
        legend: {
            top: "0%",
            textStyle: {
                color: "rgba(255,255,255,.5)",
                fontSize: fontSize(0.12)
            },
        },
        grid: {
            left: "10",
            top: "30",
            right: "10",
            bottom: "10",
            containLabel: true,
        },
        xAxis: {
            type: "category",
            boundaryGap: false,
            data: [
                "01",
                "02",
                "03",
                "04",
                "05",
                "06",
                "07",
                "08",
                "09",
                "10",
                "11",
                "12",
                "13",
                "14",
                "15",
                "16",
                "17",
                "18",
                "19",
                "20",
                "21",
                "22",
                "23",
                "24",
                "25",
                "26",
                "26",
                "28",
                "29",
                "30",
            ],
            axisTick: {
                show: false, // 去除刻度线
            },
            // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
            axisLabel: {
                textStyle: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: fontSize(0.12)
                },
            },
            // x轴线的颜色为   rgba(255,255,255,.2)
            axisLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.2)",
                },
            },
        },
        yAxis: {
            type: "value",
            axisTick: { show: false },
            axisLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.1)",
                },
            },
            axisLabel: {
                textStyle: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: fontSize(0.12)
                },
            },
            // 修改分割线的颜色
            splitLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.1)",
                },
            },
        },
        series: [{
                name: "新增粉丝",
                type: "line",
                // true 可以让我们的折线显示带有弧度
                smooth: true,
                data: [
                    130, 10, 20, 40, 30, 40, 80, 60, 20, 40, 90, 40, 20, 140, 30, 40,
                    130, 20, 20, 40, 80, 70, 30, 40, 30, 120, 20, 99, 50, 20,
                ],
                // 单独修改线的样式
                lineStyle: {
                    color: "#00d887",
                    width: fontSize(0.02),
                },
                // 设置拐点 小圆点
                symbol: "circle",
                // 拐点大小
                symbolSize: fontSize(0.08),
                // 设置拐点颜色以及边框
                itemStyle: {
                    color: "#0184d5",
                    borderColor: "rgba(221, 220, 107, .1)",
                    borderWidth: fontSize(0.12),
                },
                // 开始不显示拐点， 鼠标经过显示
                showSymbol: false,
                // 填充区域
                areaStyle: {
                    // 渐变色
                    normal: {
                        color: echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1, [{
                                    offset: 0,
                                    color: "rgba(0, 216, 135, 0.4)",
                                },
                                {
                                    offset: 0.8,
                                    color: "rgba(0, 216, 135, 0.1)",
                                },
                            ],
                            false
                        ),
                        shadowColor: "rgba(0, 0, 0, 0.1)",
                    },
                },
            },
            {
                name: "新增游客",
                type: "line",
                smooth: true,
                data: [
                    30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40,
                    30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 20, 60, 50, 40,
                ],
                // 单独修改线的样式
                lineStyle: {
                    color: "#0184d5",
                    width: fontSize(0.02),
                },
                // 设置拐点 小圆点
                symbol: "circle",
                // 拐点大小
                symbolSize: fontSize(0.08),
                // 设置拐点颜色以及边框
                itemStyle: {
                    color: "#0184d5",
                    borderColor: "rgba(221, 220, 107, .1)",
                    borderWidth: fontSize(0.12),
                },
                // 开始不显示拐点， 鼠标经过显示
                showSymbol: false,
                // 填充区域
                areaStyle: {
                    // 渐变色
                    color: echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1, [{
                                offset: 0,
                                color: "rgba(1, 132, 213, 0.4)", // 渐变色的起始颜色
                            },
                            {
                                offset: 0.8,
                                color: "rgba(1, 132, 213, 0.1)", // 渐变线的结束颜色
                            },
                        ],
                        false
                    ),
                    shadowColor: "rgba(0, 0, 0, 0.1)",
                },
            },
        ],
    };

    // 3. 把配置给实例对象
    myChart.setOption(option);
    // 4. 让图表跟随屏幕自动的去适应
    window.addEventListener("resize", function() {
        myChart.resize();
    });

    // 5.点击切换效果
    $(".line h2").on("click", "a", function() {
        // alert(1);
        // console.log($(this).index());
        // 点击 a 之后 根据当前a的索引号 找到对应的 yearData的相关对象
        // console.log(yearData[$(this).index()]);
        var obj = yearData[$(this).index()];
        option.series[0].data = obj.data[0];
        option.series[1].data = obj.data[1];
        // 需要重新渲染
        myChart.setOption(option);
    });
}
//饼状图2
export function pie2(myChart) {
    // 1. 实例化对象
    // var myChart = this.$echarts.init(this.$refs.pie2);
    var myColor = [
        "#006cff",
        "#60cda0",
        "#ed8884",
        "#ff9f7f",
        "#0096ff",
        "#9fe6b8",
        "#32c5e9",
    ];
    // 指定配置和数据
    var option = {
        color: [
            "#006cff",
            "#60cda0",
            "#ed8884",
            "#ff9f7f",
            "#0096ff",
            "#9fe6b8",
            "#32c5e9",
        ],
        tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)",
            backgroundColor: "rgba(255,255,255,0.3)",
            textStyle: {
                color: "white", //设置文字颜色
                fontSize: fontSize(0.12)
            },
            borderColor: "rgba(255,255,255,0.3)", //设置边框颜色
        },
        legend: {
            // 距离底部为0%
            bottom: "0%",
            // 小图标的宽度和高度
            itemWidth: fontSize(0.1),
            itemHeight: fontSize(0.1),
            // 修改图例组件的文字为 12px
            textStyle: {
                color: "rgba(255,255,255,.5)",
                fontSize: fontSize(0.12)
            },
        },
        //修改图表大小
        grid: {
            left: "10",
            top: "30",
            right: "10",
            bottom: "10",
            containLabel: true,
        },
        series: [{
            data: [
                { value: 40, name: "云南" },
                { value: 30, name: "北京" },
                { value: 24, name: "山东" },
                { value: 15, name: "河北" },
                { value: 20, name: "江苏" },
                { value: 25, name: "浙江" },
                { value: 30, name: "四川" },
            ],
            name: "面积模式",
            type: "pie",
            radius: ["10%", "70%"],
            center: ["50%", "40%"],
            roseType: "radius",
            // 文本标签控制饼形图文字的相关样式， 注意它是一个对象
            label: {
                fontSize: fontSize(0.1),
                color: function(params) {
                    // params 传进来的是柱子对象
                    console.log(params);
                    // dataIndex 是当前柱子的索引号
                    return myColor[params.dataIndex];
                },
            },
            labelLine: { length: fontSize(0.06), length2: fontSize(0.08) },
        }, ],
    };
    // 把配置给实例对象
    myChart.setOption(option);
    //让图表跟随屏幕自适应
    window.addEventListener("resize", function() {
        myChart.resize();
    });
}


//获取屏幕宽度并计算比例
function fontSize(res) {
    let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    if (!clientWidth) return;
    let fontSize = 100 * (clientWidth / 1920);
    // 4706*2647 -> 1400
    return res * fontSize;
}